import React, { useCallback } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import NavBar from '@/components/NavBar/NavBar';
import ChatStatus from '@/views/ConsultType/ConsultChat/components/ChatStatus/ChatStatus';
import ChatMessage from '@/views/ConsultType/ConsultChat/components/ChatMessage/ChatMessage';
import ChatAction from '@/views/ConsultType/ConsultChat/components/ChatAction/ChatAction';
import './ConsultChat.scss';

const ConsultChat = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const orderId = searchParams.get('orderId');
  const payResult = searchParams.get('payResult');
  const type = searchParams.get('type');
  // 左边插槽内容
  const left = useCallback(() => (<span>返回</span>), []);
  // 中间插槽内容
  const children = useCallback(() => (<span>医生问诊室</span>), []);
  return (
    <div className="consult-chat">
      {/*导航栏组件*/}
      <NavBar onBack={() => navigate(-1)} back={left()} children={children()}></NavBar>
      {/*状态*/}
      <ChatStatus></ChatStatus>
      {/*消息*/}
      <ChatMessage></ChatMessage>
      {/*底部操作栏*/}
      <ChatAction></ChatAction>
    </div>
  );
};

export default ConsultChat;